<template>
	<view class="content">
		<view class="travel" :class="{ active: selectedImageIndex === index }" v-for="(item,index) in carList"
			:key="index" @click="switchStyles(index)">
			<view class="travel-image">
				<image :src="$u.fileBaseUrl+ item.carImg" mode="widthFix"></image>
			</view>
			<view class="travel-title">
				<text>{{item.name}}</text>
				<text>￥{{item.price}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carList: [{
						image: "../../../static/images/index/1.png",
						price: "329",
						title: '宝马3系'
					},
					{
						image: "../../../static/images/index/1.png",
						price: "329",
						title: '宝马3系'
					}
				],
				selectedImageIndex: null, // 当前选中的图片索引
			};
		},
		methods: {
			// 切换车辆
			switchStyles(index) {
				this.selectedImageIndex = index;
			},
			// 车辆列表
			async getCarPackageList(){
				let res = await this.$u.api.getCarPackageList()
				if(res.code ==200){
					this.carList = res.rows
				}
			}
		},
		onLoad(){
			this.getCarPackageList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		
		.travel.active {
		 background: #F3F8FF;
		  border: 2rpx solid #096EF4;
		}

		.travel {
			background-color: #fff;
			margin: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 30rpx;

			.travel-image {
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					flex: 1;
					margin: 15rpx;
				}
			}

			.travel-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 20rpx;

				text {
					font-weight: 600;
					font-size: 32rpx;

					&:nth-child(1) {
						color: #000000;
					}

					&:nth-child(2) {
						color: #FB3D3B;
					}
				}
			}
		}
	}
</style>